<template>
  <div class="total">
    <div class="studenttotal">
      <div>
        <span>教师总数</span>
        <span style="color:#5AD8A6">8000</span>
      </div>
      <div
        class="teachecharts"
        style="width: 100px; height: 100%; padding-right: 0"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.getEchartData();
  },
  methods: {
    getEchartData() {
      // for (let i = 0; i < 4; i++) {
        
      //   }
      const chart = document.querySelector(".teachecharts");

      // console.log(chart);
      if (chart) {
        const myChart = this.$echarts.init(chart);
        const option = {

          series: [
            {
              type: "pie",
               radius: ["56%", "78%"],
              avoidLabelOverlap: false,
              labelLine: {
                show: false,
              },
              color: ["#5AD8A6", "#D8D8D8"],
              data: [
                { value: 75, name: "搜索引擎" },
                { value: 25, name: "直接访问" },
              ],
            },
          ],
          graphic: [
            //为环形图中间添加文字
            {
              type: "text",
              left: "center",
              top: "center",
              style: {
                text: "75%",
                textAlign: "center",
                fill: "#32373C",
                fontSize: 14,
              },
            },
          ],
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      }
      this.$on("hook:destroyed", () => {
        window.removeEventListener("resize", function () {
          myChart.resize();
        });
      });
    },
  },
};
</script>

<style lang="less" scoped>

</style>